<template>
    <div class="main">
        <div class="left" v-if='adNeed.type==1'>
            <ul class="word">
                <li v-for="(item,index,key) in adNeed.word" :key=key>
                    {{item}}
                </li>
            </ul>
            <div class="btn">
                {{adNeed.btn}}
            </div>
        </div>
        <div class="right" v-if='adNeed.type==1'>
            <div class="imgbox">
                <img :src="adNeed.img" alt="">
            </div>
        </div>
        <div class="left1" v-if='adNeed.type==2'>
            <div class="imgbox">
                <img :src="adNeed.img" alt="">
            </div>
        </div>
        <div class="right1" v-if='adNeed.type==2'>
             <ul class="word">
                <li v-for="(item,index,key) in adNeed.word" :key=key>
                    {{item}}
                </li>
            </ul>
            <div class="btn">
                {{adNeed.btn}}
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        adNeed:{
            type:Object,
            default:{
                type:1,
                img:'http://qncdn.tissys.com/mobile/static/img/design4.png',
                btn:'云计算报名系统',
                word:['Registration','System'],
            }
        }
    },
}
</script>
<style lang="less" scoped>
.main{
    width: 100%;
    padding:0 0.4rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .left{
        padding:0.1rem 0.3rem 0 0;        
        width: 50%;
        box-sizing: border-box;
        .word{
            font-size: .32rem;
            font-weight: 600;
            text-indent: 0.3rem;
            text-align: left;
        }
        .btn{
            font-size:.3rem;
            text-align: left;
            text-indent: 0.3rem;
        }
    }
    .right{
        width: 50%;
        .imgbox{
            overflow: hidden;
            width: 100%;
        }
        img{
            width: 100%;
        }
    }
    .left1{
        width: 50%;
        .imgbox{
            overflow: hidden;
            width: 100%;
        }
        img{
            width: 100%;
        }
    }
    .right1{
        width: 50%;
        padding:0.1rem  0 0 0.3rem;
        box-sizing: border-box;
         .word{
            text-align: left;
            font-size: .32rem;
            font-weight: 600;
            text-indent: 0.3rem;
        }
         .btn{
            font-size:.3rem;
            text-align: left;
            text-indent: 0.3rem;
        }
    }
}
</style>
